//table组件
Vue.component('qfTable1',{
    props:{
       colums:{
           type:Array,
           required:true,
       }
    },
     template:`<table border="1" cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>内容</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>t</td>
            <td>c</td>
        </tr>
        <tr>
           <td>1</td>
           <td>t</td>
           <td>c</td>
       </tr>
    </tbody>
</table>`
});
//page组件
Vue.component('qfPage',{
    props:{
      total:{
          type:Number,
          default:0,
      },
      pageSize:{
          type:Number,
          default:2
      }
    },
    data(){
        return{
            totalPage:0
        }
    },
    watch:{
      total:{
      handler(newdata){
          this.totalPage=Math.ceil(this.total/this.pageSize)
        },
      immediate:true,
     }
    },
    template:`<div class='qf-page' >
    <span v-for="num in totalPage" @click="$emit('click-page',num)">{{num}}</span>
    </div>`
})

//dialog组件
Vue.component('qfDialog',{
    props:{
     title:{
         type:String,
         default:'默认标题'
     },
     content:String,
     visible:{
         type:Boolean,
         default:false,
     }
    },
    template:`<div class="qf-dialog" v-if="visible">
    <div class="box">
        <div class="header">{{title}}</div>
        <div class="main">{{content}}</div>
           
        <div class="footer">
            <button @click="$emit('update:visible',false)">取消</button>
            <button>确定</button>
            </div>
    </div>
    </div>`
})
//loading2组件
Vue.component('qfLoading2',{
    props:{
          state:{
              type:Boolean,
              default:false,
          }
    },
    template:`<div class="qf-loading2" v-if="state" @click="$emit('update:state',false)">
    <span>loading...</span>
    </div>`,
})
//loading1组件
Vue.component('qfloading1', {
    props: {
      state: {
        type: Boolean,
        default: false,
      }
    },
    template: `
    <div class="qf-loading1" v-if="state">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
    
    `
  })
//按钮组件
Vue.component('qfButton',{
    props:{
        content:{
           type: String,
           required:true
        },
        type:{
           type:String,
           default: 'primary'
        }

    },
    template:`<button :class="['qf-button', 'qf-button--'+type, 'qf-button--normal']  ">
    <div class="qf-button__content">
    <span class="qf-button__text">{{content}}</span>
    </div>
</button>`
})

//导航栏
Vue.component('qfNavBar',{
    props:{
        title:{
            type:String,
            required:true,

        },
        leftArrow:Boolean,
    },
    template:`<div class="qf-nav-bar">
    <span @click="$emit('click-left')">{{leftArrow?'<返回':''}}</span>
    <span>{{title}}</span>
    <span @click="$emit('click-right')">搜索</span>
    </div>`
})

//表单组件
Vue.component('qfTable',{
    props:{
     state:{
         type:Boolean,
         default:true,
     }
    },
    data(){
     return{
        /*  account:'',
         password:'' */
         formData:{
            account:'',
            password:'' 
         }
     }
    },
    template:`
    <fieldset>
    <legend>千峰封装的表单</legend>
    用户名：<input type='text' v-model='formData.account'/>
    密码：<input type='password' v-model='formData.password'/>
    <button v-if='state' @click="$emit('submit',formData)">提交</button>
    </fieldset>`
})